<template>
  <view class="login-container">
    <!-- 樱花背景装饰 -->
    <view class="sakura-bg">
      <view class="sakura sakura-1">🌸</view>
      <view class="sakura sakura-2">🌸</view>
      <view class="sakura sakura-3">🌸</view>
      <view class="sakura sakura-4">🌸</view>
      <view class="sakura sakura-5">🌸</view>
    </view>

    <!-- 主内容区域 -->
    <view class="login-content">
      <!-- 应用标题 -->
      <view class="app-title">
        <text class="title-main">SakuraEcho</text>
        <text class="title-sub">樱花回音 - 动漫创作平台</text>
      </view>

      <!-- 登录表单 -->
      <view class="login-form">
        <view class="form-title">欢迎回来</view>
        
        <!-- 用户名/邮箱输入 -->
        <view class="input-group">
          <view class="input-item">
            <view class="input-icon">👤</view>
            <input 
              class="input-field" 
              type="text" 
              v-model="loginForm.username" 
              placeholder="用户名/邮箱"
              placeholder-class="placeholder"
            />
          </view>
          
          <!-- 密码输入 -->
          <view class="input-item">
            <view class="input-icon">🔒</view>
            <input 
              class="input-field" 
              :type="showPassword ? 'text' : 'password'" 
              v-model="loginForm.password" 
              placeholder="密码"
              placeholder-class="placeholder"
            />
            <view class="password-toggle" @click="togglePassword">
              <text class="toggle-icon">{{ showPassword ? '🙈' : '👁️' }}</text>
            </view>
          </view>
        </view>

        <!-- 记住密码和忘记密码 -->
        <view class="form-options">
          <view class="remember-me">
            <checkbox-group @change="toggleRemember">
              <label class="checkbox-label">
                <checkbox :checked="rememberMe" color="#FF69B4" />
                <text class="option-text">记住密码</text>
              </label>
            </checkbox-group>
          </view>
          <view class="forgot-password" @click="forgotPassword">
            <text class="option-text">忘记密码？</text>
          </view>
        </view>

        <!-- 登录按钮 -->
        <button 
          class="login-btn" 
          :class="{ 'loading': isLoading }"
          :disabled="isLoading || !isFormValid"
          @click="handleLogin"
        >
          <text v-if="!isLoading" class="btn-text">登录</text>
          <text v-else class="btn-text">登录中...</text>
        </button>

        <!-- 分割线 -->
        <view class="divider">
          <view class="divider-line"></view>
          <text class="divider-text">或</text>
          <view class="divider-line"></view>
        </view>

        <!-- 第三方登录 -->
        <view class="social-login">
          <text class="social-title">第三方登录</text>
          <view class="social-buttons">
            <button class="social-btn wechat" @click="wechatLogin">
              <text class="social-icon">💬</text>
              <text class="social-text">微信</text>
            </button>
            <button class="social-btn qq" @click="qqLogin">
              <text class="social-icon">🐧</text>
              <text class="social-text">QQ</text>
            </button>
            <button class="social-btn weibo" @click="weiboLogin">
              <text class="social-icon">🐦</text>
              <text class="social-text">微博</text>
            </button>
          </view>
        </view>

        <!-- 注册链接 -->
        <view class="register-link">
          <text class="link-text">还没有账号？</text>
          <text class="link-btn" @click="goToRegister">立即注册</text>
        </view>

        <!-- 游客体验 -->
        <view class="guest-section">
          <text class="guest-text" @click="guestLogin">先体验一下 →</text>
        </view>
      </view>
    </view>

    <!-- 底部装饰 -->
    <view class="login-footer">
      <text class="footer-text">开启你的动漫创作之旅</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      showPassword: false,
      rememberMe: false,
      isLoading: false
    }
  },
  computed: {
    isFormValid() {
      return this.loginForm.username.trim() && this.loginForm.password.trim()
    }
  },
  methods: {
    togglePassword() {
      this.showPassword = !this.showPassword
    },
    toggleRemember(e) {
      this.rememberMe = e.detail.value.length > 0
    },
    async handleLogin() {
      if (!this.isFormValid) {
        uni.showToast({
          title: '请填写完整信息',
          icon: 'none'
        })
        return
      }

      this.isLoading = true

      try {
        // 模拟登录请求
        await new Promise(resolve => setTimeout(resolve, 1500))
        
        // 登录成功
        uni.showToast({
          title: '登录成功',
          icon: 'success'
        })

        // 保存登录状态
        if (this.rememberMe) {
          uni.setStorageSync('rememberMe', true)
          uni.setStorageSync('username', this.loginForm.username)
        }

        // 跳转到首页
        setTimeout(() => {
          uni.switchTab({
            url: '/pages/index/index'
          })
        }, 1000)

      } catch (error) {
        uni.showToast({
          title: '登录失败，请重试',
          icon: 'none'
        })
      } finally {
        this.isLoading = false
      }
    },
    wechatLogin() {
      uni.showToast({
        title: '微信登录功能开发中',
        icon: 'none'
      })
    },
    qqLogin() {
      uni.showToast({
        title: 'QQ登录功能开发中',
        icon: 'none'
      })
    },
    weiboLogin() {
      uni.showToast({
        title: '微博登录功能开发中',
        icon: 'none'
      })
    },
    goToRegister() {
      uni.navigateTo({
        url: '/pages/register/register'
      })
    },
    guestLogin() {
      uni.showModal({
        title: '游客体验',
        content: '以游客身份体验，部分功能可能受限，是否继续？',
        success: (res) => {
          if (res.confirm) {
            uni.showToast({
              title: '欢迎体验！',
              icon: 'success'
            })
            
            setTimeout(() => {
              uni.switchTab({
                url: '/pages/index/index'
              })
            }, 1000)
          }
        }
      })
    },
    forgotPassword() {
      uni.navigateTo({
        url: '/pages/forgot-password/forgot-password'
      })
    }
  },
  onLoad() {
    // 检查是否有记住的账号
    if (uni.getStorageSync('rememberMe')) {
      this.rememberMe = true
      this.loginForm.username = uni.getStorageSync('username') || ''
    }
  }
}
</script>

<style scoped>
.login-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #FFE4E6 0%, #FFF0F5 50%, #FFE4E6 100%);
  position: relative;
  overflow: hidden;
}

.sakura-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.sakura {
  position: absolute;
  font-size: 24rpx;
  animation: float 6s infinite ease-in-out;
}

.sakura-1 { top: 10%; left: 10%; animation-delay: 0s; }
.sakura-2 { top: 20%; right: 15%; animation-delay: 1s; }
.sakura-3 { top: 60%; left: 5%; animation-delay: 2s; }
.sakura-4 { top: 40%; right: 5%; animation-delay: 3s; }
.sakura-5 { top: 80%; left: 20%; animation-delay: 4s; }

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-20rpx) rotate(180deg); }
}

.login-content {
  position: relative;
  z-index: 1;
  padding: 120rpx 60rpx 60rpx;
}

.app-title {
  text-align: center;
  margin-bottom: 80rpx;
}

.title-main {
  display: block;
  font-size: 64rpx;
  font-weight: bold;
  color: #FF69B4;
  margin-bottom: 16rpx;
}

.title-sub {
  display: block;
  font-size: 28rpx;
  color: #888;
}

.login-form {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 32rpx;
  padding: 60rpx 48rpx;
  box-shadow: 0 8rpx 32rpx rgba(255, 105, 180, 0.1);
  backdrop-filter: blur(10rpx);
}

.form-title {
  font-size: 48rpx;
  font-weight: bold;
  color: #333;
  text-align: center;
  margin-bottom: 60rpx;
}

.input-group {
  margin-bottom: 48rpx;
}

.input-item {
  position: relative;
  margin-bottom: 40rpx;
  background: #F8F8FF;
  border-radius: 24rpx;
  padding: 0 32rpx;
  display: flex;
  align-items: center;
  height: 96rpx;
  border: 2rpx solid #E6E6FA;
  transition: all 0.3s;
}

.input-item:focus-within {
  border-color: #FF69B4;
  box-shadow: 0 0 0 4rpx rgba(255, 105, 180, 0.1);
}

.input-icon {
  font-size: 36rpx;
  margin-right: 24rpx;
  color: #888;
}

.input-field {
  flex: 1;
  height: 100%;
  font-size: 32rpx;
  color: #333;
}

.placeholder {
  color: #BBB;
  font-size: 32rpx;
}

.password-toggle {
  padding: 16rpx;
  margin-left: 16rpx;
}

.toggle-icon {
  font-size: 36rpx;
  color: #888;
}

.form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 60rpx;
}

.checkbox-label {
  display: flex;
  align-items: center;
}

.option-text {
  font-size: 28rpx;
  color: #666;
  margin-left: 16rpx;
}

.forgot-password {
  padding: 16rpx;
}

.login-btn {
  width: 100%;
  height: 96rpx;
  background: linear-gradient(135deg, #FF69B4 0%, #FF1493 100%);
  border-radius: 48rpx;
  border: none;
  color: white;
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 48rpx;
  transition: all 0.3s;
}

.login-btn:active {
  transform: scale(0.98);
}

.login-btn:disabled {
  background: #CCC;
  transform: none;
}

.btn-text {
  color: white;
}

.divider {
  display: flex;
  align-items: center;
  margin-bottom: 48rpx;
}

.divider-line {
  flex: 1;
  height: 2rpx;
  background: #E6E6FA;
}

.divider-text {
  padding: 0 32rpx;
  color: #888;
  font-size: 28rpx;
}

.social-login {
  margin-bottom: 48rpx;
}

.social-title {
  display: block;
  text-align: center;
  color: #888;
  font-size: 28rpx;
  margin-bottom: 32rpx;
}

.social-buttons {
  display: flex;
  justify-content: center;
  gap: 32rpx;
}

.social-btn {
  flex: 1;
  height: 80rpx;
  background: white;
  border: 2rpx solid #E6E6FA;
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16rpx;
  transition: all 0.3s;
}

.social-btn:active {
  transform: scale(0.95);
}

.social-icon {
  font-size: 32rpx;
}

.social-text {
  font-size: 28rpx;
  color: #333;
}

.register-link {
  text-align: center;
  margin-bottom: 32rpx;
}

.link-text {
  font-size: 28rpx;
  color: #666;
}

.link-btn {
  font-size: 28rpx;
  color: #FF69B4;
  font-weight: bold;
  margin-left: 16rpx;
}

.guest-section {
  text-align: center;
}

.guest-text {
  font-size: 28rpx;
  color: #FF69B4;
  font-weight: bold;
}

.login-footer {
  position: absolute;
  bottom: 60rpx;
  left: 0;
  right: 0;
  text-align: center;
}

.footer-text {
  font-size: 24rpx;
  color: #888;
}
</style>